<div id="role_manage">
    <div class="table_muban">
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                            style="font-size: 12px"
                            id="seachInfoBox"
                            placeholder="请输入角色名搜索"
                            v-model.trim="parameters.inputVar"
                            @blur="roleScarchInfo"
                            clearable
                    >
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>



        <el-row class="table_btn roleAddBox" style="margin-bottom: 0;border-bottom: 1px solid #f2f4f8;">
            <el-col :span="24" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="addRoleData" class="addUsrtBtn">新增角色</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    @row-click="goRoleDetails"
                    @cell-mouse-enter="roleMouseEnterEvent"
                    v-loading="loading"
                    :data="tableData"
                    class="roleManageBox"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="roleName"
                        label="角色名"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createDate"
                        :formatter="getLocalTime"
                        label="创建日期"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="250"
                        prop="status"
                        :formatter="getStatus"
                        label="状态">
                </el-table-column>
                <el-table-column label="操作" align="center" width="auto">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="mini" @click="editRow(scope.$index, scope.row)" class="editBtn">编辑</el-button>
                        <el-button type="danger"  size="mini" @click="deleteRow(scope.$index, scope.row)" class="delBtn">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <!--新增弹出框-->
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="新增角色" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible" class="addDialog">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px"
                :label-position="labelPosition">

            <!--文本框模板-->
            <el-form-item label="请输入角色名称：" prop="name">
                <!--<el-input type="text" v-model="form.name" style="width: 50%;"></el-input>-->
                <input type="text" v-model="form.name" style="width: 50%;" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </el-form-item>

            <!--多行文本框模板-->
            <el-form-item label="添加角色描述：" prop="desc">
                <!--<el-input type="textarea" v-model="form.desc" style="width: 50%;"></el-input>-->
                <textarea name="" required v-model="form.desc" style="width: 50%;" lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </el-form-item>

            <!--多选框模板-->
            <el-form-item label="设置角色权限">

                <el-checkbox v-model="checkedAllTest" @change="changeAllInfo">全选</el-checkbox>
                <br />
                <div class="checkedBoxInfo" v-for=" item in checkedData">
                    <el-checkbox v-model="cheackedContainParent" :label="item.menuId" :key="item.menuName" @change="changeCheckedPId">{{item.menuName}}</el-checkbox>

                    <el-checkbox-group v-model="cheackedContain"  v-for="todo in item.sysMenus" @change="changeChecked">
                        <el-checkbox  :label="todo.menuId" :key="todo.menuName" @change="changeCheckedChend" :checked="todo.checked">{{todo.menuName}}</el-checkbox>
                    </el-checkbox-group>
                </div>

            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="backHome">取 消</el-button>
            <el-button type="primary" @click="sendRoleData(form)">确 定</el-button>
        </div>
    </el-dialog>

    <!--编辑角色弹出框-->
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="编辑角色" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogEditFormVisible" class="addDialog">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                ref="editForm"
                :rules="rulesEdit"
                :model="editForm"
                label-width="200px"
                :label-position="labelPosition">

            <!--文本框模板-->
            <el-form-item label="请输入角色名称：" prop="roleName">
                <!--<el-input v-model.trim="editForm.roleName" style="width: 50%;"></el-input>-->
                <input type="text" v-model.trim="editForm.roleName" style="width: 50%;" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </el-form-item>

            <!--多行文本框模板-->
            <el-form-item label="添加角色描述：" prop="roleDesc">
                <!--<el-input type="textarea" v-model.trim="editForm.roleDesc" style="width: 50%;"></el-input>-->
                <textarea name="" required v-model.trim="editForm.roleDesc" style="width: 50%;" lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

            </el-form-item>

            <!--多选框模板-->
            <el-form-item label="设置角色权限">

                <el-checkbox v-model="checkedAllTest" @change="changeAllInfo">全选</el-checkbox>
                <br />
                <div class="checkedBoxInfo" v-for=" item in checkedData">
                    <el-checkbox v-model="cheackedContainParent" :label="item.menuId" :key="item.menuName" @change="changeCheckedPId">{{item.menuName}}</el-checkbox>

                    <el-checkbox-group v-model="cheackedContain"  v-for="todo in item.sysMenus" @change="changeChecked">
                        <el-checkbox  :label="todo.menuId" :key="todo.menuName" @change="changeCheckedChend" :checked="todo.checked">{{todo.menuName}}</el-checkbox>
                    </el-checkbox-group>
                </div>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="backHome">取 消</el-button>
            <el-button type="primary" @click="sendEditRoleData">确 定</el-button>
        </div>
    </el-dialog>
    <!--详情页单出框-->
    <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="用户详情"  :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogDetailsFormVisible" class="dialogDetails">
        <div class="info-template-content">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-row class="item-row">
                <el-col :span="5" >角色名</el-col>
                <el-col :span="19" >{{detailsForm.roleName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >角色创建时间</el-col>
                <el-col :span="19" >{{detailsForm.createDate}}</el-col>
            </el-row>
            <el-row class="item-row" >
                <el-col :span="5" >角色编码</el-col>
                <el-col :span="19" >{{detailsForm.roleCode}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >状态</el-col>
                <el-col :span="19" >{{detailsForm.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >权限功能</el-col>
                <el-col :span="15">{{detailsForm.limits}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>

<script>
    $(function () {
        placeHolde("#seachInfoBox","请输入角色名进行搜索");
    });


    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });



    var role_manage = new Vue({
        el: "#role_manage",
        data: {
            isShowingBox:false,
            showDelBtn:false,
            escAble:false,
            modalAble:false,
            loading:false,
            loadingDetails:false,
            loadingEdit:false,
            ismodalClose:false,
            checkedAllTest:'',
            cheackedContain:[],
            cheackedContainParent:[],
            testDialogFormVisible:false,
            checkedData:[],
            isCheckedAllBtn:false,


            menuData: [],
            inputVar: '',
            tableData:[],
            labelPosition:'left',
            dialogFormVisible: false,
            form: {
                name: '',
                desc: '',

            },
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { max: 18, message: '长度在 18 个字符以内', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请添加角色描述', trigger: 'blur' },
                    { max: 100, message: '长度在 100 个字符以内', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px',
            dialogEditFormVisible: false,
            labelPosition:'left',
            editForm: {
                roleName: '',
                roleDesc: '',
                roleid:'',
            },
            rulesEdit: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { max: 18, message: '长度在 18 个字符以内', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请添加角色描述', trigger: 'blur' },
                    { max: 100, message: '长度在 100 个字符以内', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px',
            dialogDetailsFormVisible:false,
            detailsForm: {
                status:'',
                roleName: '',
                createDate: '',
                roleCode: '',
                limits: '',
            },
            totalCount:'',
            totalPage:'',
            parameters:{
                'status':'',
                'currentPage':'',
                'inputVar' : '',
                'search':'1'
            },
            currentPage: 1,
            pageSize:10
        },
        methods: {
            backHome:function () {
                this.closeAddDialog();
                this.isShowingBox = false;
                this.dialogEditFormVisible = false;
            },
            /**
             * 点击X关闭模态框
             * */
            closeAddDialog:function () {
                this.isShowingBox = false;
                if(role_manage.dialogFormVisible){
                    role_manage.dialogFormVisible = false;
                    role_manage.$refs.form.resetFields();
                }else if(role_manage.dialogEditFormVisible){
                    role_manage.dialogEditFormVisible = false;
                    role_manage.$refs.editForm.resetFields();
                }else if(role_manage.dialogDetailsFormVisible){
                    role_manage.dialogDetailsFormVisible=false;
                }
            },
            changeAllInfo:function(){
                if(this.checkedAllTest){
//                                cheackedContain:[],
//                                    cheackedContainParent:[],
                    for(var i = 0;i<this.checkedData.length;i++){
                        this.cheackedContainParent.push(this.checkedData[i].menuId);
                        var chanderInfo = this.checkedData[i];
                        for(var k = 0;k<chanderInfo.sysMenus.length;k++){
                            this.cheackedContain.push(chanderInfo.sysMenus[k].menuId)
                        }
                    }
                }
                if(this.checkedAllTest == false){
                    this.cheackedContainParent = [];
                    this.cheackedContain = [];
                }
            },
            changeCheckedChend:function(e){
//                            if(e==false){
//                                for(var o = 0;o < this.checkedData.length;o++){
//                                    if(this.checkedData[o].sysMenus.length == 1){
//                                        var checkedDataId = this.checkedData[o].menuId;
//                                            for(var s = 0;s<this.cheackedContainParent.length;s++){
//                                                this.cheackedContainParent.remove(checkedDataId)
//                                            }
//
//                                    }
//                                }
//                            }
//                            if(this.cheackedContain.length == 0){
//                                this.cheackedContainParent = [];
//                            }
            },
            changeChecked:function(value){
                var pVal = value;
                var that = this;
                var arrObjCheck=new Array();
                for(var i = 0;i < value.length;i++){
                    var parentId = value[i].split('.')[0]+'.'+value[i].split(".")[1];
                    arrObjCheck.push(parentId)

                }
//                            var arr = [];
//
//                            arrObjCheck.sort()
//                            for (var z = 0; z < arrObjCheck.length;) {
//                                var count = 0;
//                                for (var j = z; j < arrObjCheck.length; j++) {
//                                    if (arrObjCheck[z] === arrObjCheck[j]) {
//                                        count++;
//                                    }
//                                }
//                                arr.push({
//                                    date: arrObjCheck[z],
//                                    count: count
//                                })
//                                z+=count;
//                            }

//                            for (var k = 0; k < arr.length; k++) {
//                                var pCheckedName=arr[k].date;
//                                var pCheckedCount = arr[k].count;
//                                    for(var h = 0;h<this.checkedData.length;h++){
//                                        if(this.checkedData[h].menuId == pCheckedName){
//                                             var pLenght = this.checkedData[h].sysMenus.length;
//                                                if(pCheckedCount == pLenght){
//                                                    this.cheackedContainParent.push(pCheckedName)
//                                                }
//                                                if( pCheckedCount != pLenght){
//                                                    var arrCheackedContainParent = this.cheackedContainParent;
//                                                    for(var b = 0;b<arrCheackedContainParent.length;b++){
//                                                        if(arrCheackedContainParent[b] == pCheckedName){
//                                                            this.cheackedContainParent.remove(arrCheackedContainParent[b]);
//                                                        }
//
//                                                    }
//
//                                                }
//
//
//                                        }
//                                    }
//                            }
            },
            /**
             * 点击父标签全选子选矿
             * */
            changeCheckedPId:function(val,e){
                var menuID = e.target.defaultValue;
                var _self=this;
                _self.checkedData.forEach(function (item,index) {
                    if(item.menuId == menuID){
                        item.sysMenus.forEach(function (a,b) {
                            if(val == true){
                                _self.cheackedContain.push(a.menuId)
                            }
                            if(val == false){

                                for(var j = 0;j < _self.cheackedContain.length;j++){
                                    var chenderId = _self.cheackedContain[j].split(".")[0] + '.'+_self.cheackedContain[j].split(".")[1];
                                    if(chenderId == menuID){
                                        var indexInfo = _self.cheackedContain.indexOf(_self.cheackedContain[j]);
                                        _self.cheackedContain.remove(_self.cheackedContain[j]);
                                    }
                                }
                            }

                        })
                    }
                })

            },
            sendRoleData:function (formName) {
                var that = this;
                if(this.form.name == "" || this.form.desc == "" || this.form.name.length > 18 || this.form.desc.length > 100){
                    layer.msg('填写有误，请认真核对必填项目!', {icon: 2});
                    return
                }else if (this.cheackedContain.length == 0){
                    layer.msg('请选择权限!', {icon: 2});
                    return
                }else {
                    this.loading = true;
                    this.dialogFormVisible = false;
                    for(var i = 0;i < this.cheackedContain.length;i++){
                        this.cheackedContainParent.push(this.cheackedContain[i]);
                    } var cheackArr = [];

                    for(var z = 0;z < this.cheackedContainParent.length;z++){
                        cheackArr.push(this.cheackedContainParent[z].split('.')[0]+'.'+this.cheackedContainParent[z].split(".")[1])
                    }
                    for(var j = 0;j < cheackArr.length;j++){
                        this.cheackedContainParent.push(cheackArr[j]);
                    }
                    var allID = [];
                    for(var k = 0;k<this.cheackedContainParent.length;k++){
                        if(allID.indexOf(this.cheackedContainParent[k]) == -1){
                            allID.push(this.cheackedContainParent[k]);
                        }else {
                            continue;
                        }
                    }
                    var roleData = allID.join(",");
                    var options5={
                        roleName:this.form.name,
                        descb:this.form.desc,
                        rolemenuId:roleData

                    };
                    sendService('${basePath}/merchant/mcrole/saveUpdateRole', options5, function (resData) {
                        if(resData.status == 'success'){
                            that.loading = false;
//                            that.$message({
//                                type: 'success',
//                                message: resData.msg
//                            });
                            layer.msg(resData.msg, {icon: 6});
                            that.isShowingBox = false;
                            reloadPage('${basePath}merchant/role/getToRolelistPage');
                            that.cheackedContainParent = [];
                            that.cheackedContain = [];
                        }else {
                            that.loading = false;
                            layer.msg(resData.msg, {icon: 2});
                            reloadPage('${basePath}merchant/role/getToRolelistPage');
                            that.cheackedContainParent = [];
                            that.cheackedContain = [];
                        }
                    });
                }

                if (this.$refs[formName]!==undefined) {
                    //this.$refs[formName].resetFields();
                    that.isShowingBox = false;
                }
                that.cheackedContainParent = [];
                that.cheackedContain = [];
            },
            sendEditRoleData:function () {
                var that = this;
                if(this.editForm.roleName == "" || this.editForm.roleDesc == "" || this.editForm.roleName.length >18 || this.editForm.roleDesc.length > 100){
//                    this.$message({
//                        message: '填写有误，请认真核对必填项目!',
//                        type: 'warning'
//                    });
                    layer.msg('填写有误，请认真核对必填项目!', {icon: 2});
                    return
                }else if(this.cheackedContain.length == 0){
                    layer.msg('请选择权限!', {icon: 2});
                    return
                }else {
                    this.dialogEditFormVisible = false;
                    for(var i = 0;i < this.cheackedContain.length;i++){
                        this.cheackedContainParent.push(this.cheackedContain[i]);
                    }
                    var cheackArr = [];

                    for(var z = 0;z < this.cheackedContainParent.length;z++){
                        cheackArr.push(this.cheackedContainParent[z].split('.')[0]+'.'+this.cheackedContainParent[z].split(".")[1])
                    }
                    for(var j = 0;j < cheackArr.length;j++){
                        this.cheackedContainParent.push(cheackArr[j]);
                    }
                    var allID = [];
                    for(var k = 0;k<this.cheackedContainParent.length;k++){
                        if(allID.indexOf(this.cheackedContainParent[k]) == -1){
                            allID.push(this.cheackedContainParent[k]);
                        }else {
                            continue;
                        }
                    }
                    var editStr = allID.join(",");

                    var options6={
                        roleName:this.editForm.roleName,
                        descb:this.editForm.roleDesc,
                        roleId:this.editForm.roleid,
                        rolemenuId:editStr
                    };
                    sendService('${basePath}/merchant/mcrole/saveUpdateRole', options6, function (resData) {
                        if(resData.status == 'success'){
                            that.isShowingBox = true;
//                            that.$message({
//                                type: 'success',
//                                message: resData.msg
//                            });
                            layer.msg(resData.msg, {icon: 6});
                            that.cheackedContainParent = [];
                            that.cheackedContain = [];
                            reloadPage('${basePath}merchant/role/getToRolelistPage');
                        }else {
                            that.loading = false;
                            layer.msg(resData.msg, {icon: 2});
                            that.cheackedContainParent = [];
                            that.cheackedContain = [];
                            reloadPage('${basePath}merchant/role/getToRolelistPage');
                        }
                    });
                    this.cheackedContain=[];
                    this.cheackedContainParent=[];
                }


            },

//----------------------------------------------------------------------------------------------------
            handleCurrentChange: function(currentPage){

                Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,currentPage,function (resData) {
                    if(resData.status == 'success'){
                        this.tableData = resData.t;
                    }
                });
            },
            goRoleDetails:function(row, event, column){
                var that = this;
                if(column.label != '操作'){
//                                $(".main-right").empty();
//                                $(".main-right").load('${basePath}/merchant/role/toRoleDetial');
                    this.isShowingBox = true;
                    this.dialogDetailsFormVisible=true;
                    this.detailsForm.status=this.getStatus(row);
                    this.detailsForm.roleName= row.roleName;
                    this.detailsForm.createDate= this.getLocalTime(row);
                    this.detailsForm.roleCode= row.roleCode;
                    var options3= {
                        roleId:row.roleId
                    };
                    sendService('${basePath}merchant/role/getRoleMenuIds', options3, function (resData) {
                        if(resData.status == 'success'){
                            that.detailsForm.limits = resData.t.menuNamelist.join(" , ");
                            that.loadingDetails = false;
                        }
                    });

                }
                if(column.label == '操作'){
                    return
                }
            },
            roleMouseEnterEvent:function(row, event, column){
                if(event.label == '操作'){
                    column.style.cursor="default"
                }
                if(event.label != '操作'){
                    column.style.cursor="pointer"
                }
            },
            searchFun:function(){
                //请求接口返回数据
                Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,1,function (resData) {

                    if(resData.status == 'success'){
                        //this.tableData = resData.t;
                        //console.log(resData)
                    }
                });
            },
            roleScarchInfo:function(){
                if(this.parameters.inputVar == ""){
                    Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,1,function (resData) {

                        if(resData.status == 'success'){

                        }
                    });
                }
            },
            goPage:function(url) {
                //this.$router.push({path : url});
            },

            editRow:function(index,row){
                this.isShowingBox = true;
                this.dialogEditFormVisible = true;
                this.editForm.roleName = row.roleName;
                this.editForm.roleDesc = row.descb;
                this.editForm.roleid = row.roleId;

                var options= {
                    roleId:row.roleId
                };
                sendService('${basePath}merchant/role/getRoleMenuIds', options, function (resData) {
                    if(resData.status == 'success'){
                        for(var i = 0;i<resData.t.list.length;i++){
                            if(resData.t.list[i].length == 16){
                                role_manage.cheackedContain.push(resData.t.list[i])
                            }
                            if(resData.t.list[i].length == 12){
                                role_manage.cheackedContainParent.push(resData.t.list[i])
                            }
                        }
                        role_manage.loadingEdit = false;

                    }
                });

            },
            addRoleData:function(){
                this.isShowingBox = true;
                var that = this;
                setTimeout(function () {
                    //that.$refs['form'].resetFields();
                },0);
                //this.testDialogFormVisible = true;
                this.dialogFormVisible = true;
                this.form.name='';
                this.form.desc='';
                this.cheackedContain=[];
                this.cheackedContainParent=[];

            },
            deleteRow:function(index, row) {
                var that = this;
                var indexing1 = index;
                var delRowId = row.roleId;
                var message = confirm('确认删除此角色吗？');
                if(message){
                    var delOption= {roleId:delRowId};
                    sendService('${basePath}/merchant/role/deleteRole', delOption, function (resData) {
                        if(resData.status == 'success'){
                            layer.msg(resData.msg, {icon: 6});
                            reloadPage('${basePath}merchant/role/getToRolelistPage');
                        }else {
                            layer.msg(resData.msg, {icon: 2});
                        }

                    })
                }
            },
            getLocalTime:function (row){
                var time = row.createDate;
                if (time==null || time=="")
                    return "" ;
                var currentDate = new Date(parseInt(time));
                var currentYear = currentDate.getFullYear();
                var currentMonth = currentDate.getMonth() + 1;
                var currentDay = currentDate.getDate();
                var h = currentDate.getHours();
                var min = currentDate.getMinutes();
                var sec = currentDate.getSeconds();
                if (currentMonth < 10)
                {
                    currentMonth = "0".concat(currentMonth);
                }
                if (currentDay < 10)
                {
                    currentDay = "0".concat(currentDay);
                }
                if (h < 10)
                {
                    h = "0".concat(h);
                }
                if (min < 10)
                {
                    min = "0".concat(min);
                }
                if (sec < 10)
                {
                    sec = "0".concat(sec);
                }
                //var  date = currentYear + "-" + currentMonth + "-" + currentDay +" " + h + ":" + min + ":" + sec ;
                var  date = currentYear + "-" + currentMonth + "-" + currentDay;
                return date ;
            },
            getStatus:function(row){
                var status = row.status;
                if(status == '1'){
                    return '未审核'
                }else if(status == '2'){
                    return '正常'
                }else if(status == '3'){
                    return '禁用'
                }else {
                    return ''
                }


            },
            isTrue:function(e){
                console.log(e)
            }
        },
        created: function () {


            Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', null,1,function (resData) {
                if(resData.status == 'success'){
                    layer.close(loadRole);
                }
            });
            sendService('${basePath}/system/menu/getMenuByUrl', {}, function (resData) {
                if(resData.status == 'success'){
                    role_manage.checkedData = resData.t;
                }
            });
        },
        computed:{
            isOverflow:function () {
                if(this.isShowingBox){
                    $(".main-right").css({'overflow':"hidden"});
                }
                if(!this.isShowingBox){

                    $(".main-right").css({'overflow':"auto"});
                }

            }
        }
    });
    Array.prototype.indexOf = function(value) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == value) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(v) {
        var index = this.indexOf(v);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>

<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    .roleManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
        padding: 4px 10px;
    }
    .roleManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }
    .roleManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
        padding: 4px 10px;
    }
    .roleManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .table_search .roleAddBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .el-table::before{
        height: 0;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }


    .addDialog .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .addDialog .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;

    }
    .addDialog .add-template-form label.el-form-item__label{
        font-size: 16px;
        color: #666666;
    }
    .addDialog .add-template-form .el-form-item{
        margin-bottom: 50px;
    }
    .addDialog .add-template-form .btn-item-cancel{
        margin-left: 100px;
    }
    .addDialog .checkbox-child{
        margin-left: 50px;
    }
    /*.addDialog .el-dialog{*/
        /*width: 60%;*/
        /*height: 85%;*/
        /*overflow: auto;*/
        /*margin-top: 10vh !important;*/
    /*}*/
    .addDialog .el-form--label-left .el-form-item__label{
        text-align: center;
    }
    .addDialo .el-input{
        width: 50%;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        /*height: 46px;*/
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #666;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-right: 10px;
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }

    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
        height: auto;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    /*.dialogDetails .info-template-content{*/
    /*background: #ffffff;*/
    /*padding: 0 30px;*/
    /*}*/
    /*.dialogDetails .item-row{*/
    /*margin-bottom: 30px;*/
    /*font-size: 16px;*/
    /*}*/
    .el-checkbox-group{
        padding-left: 30px;
    }
    .el-checkbox-group .el-checkbox:nth-of-type(5){
        margin-left: 0px;
    }

    .errorWaring{
        color:#fa5555;
        font-size: 12px;
        line-height:1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0px;

    }
    .errorWaringSys{
        color:#fa5555;
        font-size: 12px;
        line-height:1;
        padding-top: 4px;
        position: absolute;
        top: 10px;
        left: 75px;
    }
    .checkedBoxInfo .el-checkbox-group{
        display: inline-block;
    }
    .checkedBoxInfo .el-checkbox{
        display: block;
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #ff4444;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .el-textarea__inner{
        overflow: auto;
        resize: none;
        height: 40px;
        line-height: 1;
        vertical-align: middle;
    }
    .isShowingBox{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 1;

    }
    .delDialogBtn{
        position: absolute;
        right: 10px;
        top:10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        color: #ff4444;
        cursor: pointer;
        text-align: center;
    }
    .layui-textarea{
        overflow: auto;
        resize: none;
    }




    .el-dialog__header{
        z-index: 10;
    }
    .el-dialog{
        margin-top: 12vh !important;
    }
    .el-dialog__wrapper{
        overflow: hidden;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    .el-dialog__wrapper .el-dialog__body{
        margin-top: 40px;
        height: 350px;
        overflow: auto;
    }
</style>
